// 角色管理

<template>
  <div class="containerBox wrap">
    <!-- 查询form -->
    <cusCard>
      <div class="searchBox">

        <el-form :model="roleForm" :inline="true">
          <el-form-item label="角色名称">
            <el-input v-model.trim="roleForm.roleName" placeholder="请输入角色名称" @keyup.enter="searchHandler" clearable />
          </el-form-item>
          <el-form-item>
            <cusButton color="#0052D9" @click="searchHandler" v-hasPerm="10">查询</cusButton>
            <cusButton CssObj="border-color:#0052D9;color:#0052D9" @click="resetHandler">重置
            </cusButton>
          </el-form-item>
        </el-form>
      </div>
    </cusCard>

    <!-- 角色 table -->
    <cusCard class="cmt-16 wrap-table">
      <cusButton color="#0052D9" @click="addHandler('add')" v-hasPerm="20">
        <i-ep-plus />添加
      </cusButton>
      <cusTable :tableData="roleTableData" :tableColumns="tableColumns" @changeCol="changeCol" :loading="loading"
        :showSelect="false">

        <template #operation="{ row }">
          <cusButton style="color:#0052D9;padding:0" :text="true" @click="addHandler('edit', row)" v-if="!row.isDefault"
            v-hasPerm="30">
            编辑
          </cusButton>
          <el-popconfirm width="250" confirm-button-text="确认" cancel-button-text="取消" :title="`确认删除${row.name}吗?`"
            @confirm="delHandler(row.id)">
            <template #reference>
              <cusButton style="color:#0052D9;padding:0" :text="true" v-if="!row.isDefault" v-hasPerm="40">删除
              </cusButton>
            </template>
          </el-popconfirm>
        </template>
      </cusTable>
      <div class="cmt-16 float-right">
        <cusPagination @handleSizeChange="sizeChange" @handleCurrentChange="currentChange" :all="pageObj">
        </cusPagination>
      </div>
    </cusCard>

    <!-- 编辑/添加人员弹框 -->
    <editDialog ref="editRef" @onInit="getRoleList"></editDialog>

  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { View } from "@element-plus/icons-vue";
import editDialog from "./components/editDialog.vue";

import { reqRoleList, reqDeleteRole } from "@/api/business/role";
const roleForm = ref({
  roleName: "",
});

const pageInit = () => ({
  total: 0,
  page: 1,
  pageSize: 10,
});
const pageObj = ref(pageInit());
const loading = ref(false);

// 表格列数据
const tableColumns = reactive([
  { label: "角色名称", prop: "name" },
  { label: "角色描述", prop: "descr" },
  { label: "创建时间", prop: "gmtCreate", width: "150" },
  {
    label: "操作",
    prop: "operation",
    slot: true,
    width: "200",
    fixed: "right",
  },
]);

const roleTableData = ref([]);

// 获取角色列表
const getRoleList = () => {
  loading.value = true;
  reqRoleList({
    currentPage: pageObj.value.page,
    pageSize: pageObj.value.pageSize,
    name: roleForm.value.roleName,
  }).then((res) => {
    loading.value = false;
    if (res.code == 1) {
      roleTableData.value = res.data.list;
      pageObj.value.total = res.data.total;
    }
  });
};

const delHandler = (id) => {
  reqDeleteRole({ id }).then((res) => {
    if (res.code == 1) {
      ElMessage.success("删除成功");
      getRoleList();
    } else {
      ElMessage.info(res.msg);
    }
  });
};

const searchHandler = () => {
  getRoleList();
};

const resetHandler = () => {
  roleForm.value.roleName = "";
  pageObj.value = pageInit();
  getRoleList();
};

const sizeChange = (val: number) => {
  pageObj.value.pageSize = val;
  getRoleList();
};

const currentChange = (val: number) => {
  pageObj.value.page = val;
  getRoleList();
};

const boundRef = ref(null);

const editRef = ref(null);
// 添加事件
const addHandler = (type, row) => {
  if (type == "edit") {
    editRef.value.show(row.id);
    return;
  }
  editRef.value.show();
};

onMounted(() => {
  getRoleList();
});
</script>

<style lang="scss" scoped></style>